Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Stand Alone Colors
Below are standalone color definitions we use.
.border
.border strong
.text
.text strong
.shadow
.scrim
$inherited.colors.custom.one
dark:
#FFFFFF
light:
#222222
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#FFFFFF
light:
#222222
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#333333
light:
#D9D9D9
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#333333
light:
#D9D9D9
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#FFFFFF
light:
#333333
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#FFFFFF
light:
#333333
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#D9D9D9
light:
#707070
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#D9D9D9
light:
#707070
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#393939
light:
#393939
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#393939
light:
#393939
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.six
for
custom six
Background Colors
Below are background color definitions we use.
.base
.step-1
.step-2
.overlay
.code
$inherited.colors.custom.one
dark:
#000000
light:
#FFFFFF
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#000000
light:
#FFFFFF
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#111111
light:
#FDFAF1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#111111
light:
#FDFAF1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#000000
light:
#FFFFFF
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#000000
light:
#FFFFFF
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#000000
light:
#000000
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#000000
light:
#000000
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#111111
light:
#FFFFFF
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#111111
light:
#FFFFFF
we use
$inherited.colors.custom.five
for
custom five
CTA Primary Colors
Below are cta primary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#D77730
light:
#D77730
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#D77730
light:
#D77730
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#BF6A2A
light:
#BF6A2A
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#BF6A2A
light:
#BF6A2A
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#FAD9C0
light:
#FAD9C0
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#FAD9C0
light:
#FAD9C0
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#B36328
light:
#B36328
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#B36328
light:
#B36328
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#F3A063
light:
#F3A063
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#F3A063
light:
#F3A063
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#FFFFFF
light:
#FFFFFF
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#FFFFFF
light:
#FFFFFF
we use
$inherited.colors.custom.seven
for
custom seven
CTA Secondary Colors
Below are cta secondary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#D4D1CE
light:
#D4D1CE
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#D4D1CE
light:
#D4D1CE
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#BCBAB7
light:
#BCBAB7
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#BCBAB7
light:
#BCBAB7
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#F9F8F7
light:
#F9F8F7
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#F9F8F7
light:
#F9F8F7
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#333333
light:
#333333
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#333333
light:
#333333
we use
$inherited.colors.custom.seven
for
custom seven
CTA Tertiary Colors
Below are cta tertiary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#4A6490
light:
#4A6490
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#4A6490
light:
#4A6490
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#3d5276
light:
#3d5276
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#3d5276
light:
#3d5276
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#2b3a54
light:
#2b3a54
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#2b3a54
light:
#2b3a54
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
rgba(74, 100, 144, 0.4)
light:
rgba(74, 100, 144, 0.4)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
rgba(74, 100, 144, 0.4)
light:
rgba(74, 100, 144, 0.4)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#6882b1
light:
#6882b1
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#6882b1
light:
#6882b1
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#4e6997
light:
#4e6997
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#4e6997
light:
#4e6997
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.seven
for
custom seven
CTA Danger Colors
Below are cta danger color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#F1BDB6
light:
#F1BDB6
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#F1BDB6
light:
#F1BDB6
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#F9E4E1
light:
#F9E4E1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#F9E4E1
light:
#F9E4E1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#D46A63
light:
#D46A63
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#D46A63
light:
#D46A63
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#FAECEB
light:
#FAECEB
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#FAECEB
light:
#FAECEB
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#D97973
light:
#D97973
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#D97973
light:
#D97973
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#E9968C
light:
#E9968C
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#E9968C
light:
#E9968C
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#D84836
light:
#D84836
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#D84836
light:
#D84836
we use
$inherited.colors.custom.seven
for
custom seven
Accent Colors
Below are accent color definitions we use.
.primary
.secondary
.tertiary
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#c5cbd7
light:
#c5cbd7
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#c5cbd7
light:
#c5cbd7
we use
$inherited.colors.custom.three
for
custom three
Error Colors
Below are error colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#F9E4E1
light:
#F9E4E1
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#F9E4E1
light:
#F9E4E1
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#D84836
light:
#D84836
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#D84836
light:
#D84836
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#E9968C
light:
#E9968C
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#E9968C
light:
#E9968C
we use
$inherited.colors.custom.three
for
custom three
Success Colors
Below are success colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#DCEFE4
light:
#DCEFE4
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#DCEFE4
light:
#DCEFE4
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#3E8D61
light:
#3E8D61
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#3E8D61
light:
#3E8D61
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#95D0AF
light:
#95D0AF
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#95D0AF
light:
#95D0AF
we use
$inherited.colors.custom.three
for
custom three
Info Colors
Below are info colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#DAE7FB
light:
#DAE7FB
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#DAE7FB
light:
#DAE7FB
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#5290EC
light:
#5290EC
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#5290EC
light:
#5290EC
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#7EACF1
light:
#7EACF1
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#7EACF1
light:
#7EACF1
we use
$inherited.colors.custom.three
for
custom three
Warning Colors
Below are warning color definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#FDF7F1
light:
#FDF7F1
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#FDF7F1
light:
#FDF7F1
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#E78B3E
light:
#E78B3E
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#E78B3E
light:
#E78B3E
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#F2C097
light:
#F2C097
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#F2C097
light:
#F2C097
we use
$inherited.colors.custom.three
for
custom three
Custom Colors
Below are custom color definitions we use.
.one
.two
.three
.four
.five
.six
.seven
.eight
.nine
.ten
$inherited.colors.custom.one
dark:
#4AA35C
light:
#4AA35C
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#4AA35C
light:
#4AA35C
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#5C2860
light:
#5C2860
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#5C2860
light:
#5C2860
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#EBBE52
light:
#EBBE52
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#EBBE52
light:
#EBBE52
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#111111
light:
#FDFAF1
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#111111
light:
#FDFAF1
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#222222
light:
#FBF5E2
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#222222
light:
#FBF5E2
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#ef8dd6
light:
#ef8dd6
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#ef8dd6
light:
#ef8dd6
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#7564be
light:
#7564be
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#7564be
light:
#7564be
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.eight
dark:
#d554b3
light:
#d554b3
we use
$inherited.colors.custom.eight
for
custom eight
$inherited.colors.custom.eight
dark:
#d554b3
light:
#d554b3
we use
$inherited.colors.custom.eight
for
custom eight
$inherited.colors.custom.nine
dark:
#ec8943
light:
#ec8943
we use
$inherited.colors.custom.nine
for
custom nine
$inherited.colors.custom.nine
dark:
#ec8943
light:
#ec8943
we use
$inherited.colors.custom.nine
for
custom nine
$inherited.colors.custom.ten
dark:
#da7a4a
light:
#da7a4a
we use
$inherited.colors.custom.ten
for
custom ten
$inherited.colors.custom.ten
dark:
#da7a4a
light:
#da7a4a
we use
$inherited.colors.custom.ten
for
custom ten